<template>
  <div id="competePage" @click="bodyClick">
    <HeadNav
      type="compete"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="compete" sort="goodsmonitor"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <a-affix :offset-top="36">
              <div class="model-container">
                <div class="model-bg clearfix">
                  <div class="float-left"></div>
                  <div class="float-right" style="padding: 10px 15px">
                    <TimeChoose
                      ref="time"
                      @changeTime="changeTime"
                      @closeDom="closeDom"
                    ></TimeChoose>
                  </div>
                </div>
              </div>
            </a-affix>
            <!-- 单品对比 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">单品对比</div>
                <div class="compete">
                  <div class="top">
                    <!-- 品种1 -->
                    <div
                      :class="
                        close1
                          ? 'compete-publish goods active first'
                          : 'compete-publish goods'
                      "
                      @click.stop="showCompete(1)"
                    >
                      <div class="compete-tag first" v-if="close1">品种1</div>
                      <div v-if="close1" class="compete-goods">
                        <div class="goods-img" v-if="info1.cover_pic">
                          <img
                            :src="info1.cover_pic"
                            alt=""
                            width="40px"
                            height="40px"
                          />
                        </div>
                        <span
                          v-else
                          class="no-pic"
                          style="min-width: 40px; min-height: 40px"
                        ></span>
                        <div class="goods-title">{{ info1.goods_name }}</div>
                      </div>
                      <span v-else>+设置对比</span>
                      <span class="compete-ico">
                        <a-icon
                          type="close"
                          v-if="close1"
                          @click.stop="delete1"
                        />
                      </span>
                    </div>
                    <span style="margin: 0 14px">VS</span>
                    <!-- 品种2 -->
                    <div
                      :class="
                        close2
                          ? 'compete-publish goods active second'
                          : 'compete-publish goods'
                      "
                      @click.stop="showCompete(2)"
                    >
                      <div class="compete-tag second" v-if="close2">品种2</div>
                      <div v-if="close2" class="compete-goods">
                        <div class="goods-img" v-if="info2.cover_pic">
                          <img
                            :src="info2.cover_pic"
                            alt=""
                            width="40px"
                            height="40px"
                          />
                        </div>
                        <span
                          v-else
                          class="no-pic"
                          style="min-width: 40px; min-height: 40px"
                        ></span>
                        <div class="goods-title">{{ info2.goods_name }}</div>
                      </div>
                      <span v-else>+设置对比</span>
                      <span class="compete-ico">
                        <a-icon
                          type="close"
                          v-if="close2"
                          @click.stop="delete2"
                        />
                      </span>
                    </div>
                    <span style="margin: 0 14px">VS</span>
                    <!-- 品种3 -->
                    <div
                      :class="
                        close3
                          ? 'compete-publish goods active third'
                          : 'compete-publish goods'
                      "
                      @click.stop="showCompete(3)"
                    >
                      <div class="compete-tag third" v-if="close3">品种3</div>
                      <div v-if="close3" class="compete-goods">
                        <div class="goods-img" v-if="info3.cover_pic">
                          <img
                            :src="info3.cover_pic"
                            alt=""
                            width="40px"
                            height="40px"
                          />
                        </div>
                        <span
                          v-else
                          class="no-pic"
                          style="min-width: 40px; min-height: 40px"
                        ></span>
                        <div class="goods-title">{{ info3.goods_name }}</div>
                      </div>
                      <span v-else>+设置对比</span>
                      <span class="compete-ico">
                        <a-icon
                          type="close"
                          v-if="close3"
                          @click.stop="delete3"
                        />
                      </span>
                    </div>
                    <span style="margin: 0 14px">VS</span>
                    <!-- 品种4 -->
                    <div
                      :class="
                        close4
                          ? 'compete-publish goods active fourth'
                          : 'compete-publish goods'
                      "
                      @click.stop="showCompete(4)"
                    >
                      <div class="compete-tag fourth" v-if="close4">品种4</div>
                      <div v-if="close4" class="compete-goods">
                        <div class="goods-img" v-if="info4.cover_pic">
                          <img
                            :src="info4.cover_pic"
                            alt=""
                            width="40px"
                            height="40px"
                          />
                        </div>
                        <span
                          v-else
                          class="no-pic"
                          style="min-width: 40px; min-height: 40px"
                        ></span>
                        <div class="goods-title">{{ info4.goods_name }}</div>
                      </div>
                      <span v-else>+设置对比</span>
                      <span class="compete-ico">
                        <a-icon
                          type="close"
                          v-if="close4"
                          @click.stop="delete4"
                        />
                      </span>
                    </div>
                    <div
                      :class="singleClass"
                      v-if="showSingle"
                      @click.stop="singleClick"
                    >
                      <div class="single-head small-size">
                        <a-tabs :activeKey="tabKey" @change="callback">
                          <a-tab-pane key="1" tab="竞品监控"></a-tab-pane>
                          <a-tab-pane key="2" tab="自选关注"></a-tab-pane>
                          <a-tab-pane key="3" tab="本社品种"></a-tab-pane>
                        </a-tabs>
                      </div>
                      <div class="single-content">
                        <div style="width: 340px">
                          <a-input-search
                            placeholder="搜索品种名称、ISBN"
                            enter-button="搜索"
                            v-model="inputVal"
                            @search="onSearch"
                          />
                        </div>
                        <div
                          class="single-lists clearfix"
                          v-if="showList.length > 0"
                        >
                          <div
                            class="single-list float-left"
                            v-for="(item, index) in showList"
                            :key="index"
                            @click="select(item)"
                          >
                            <div class="single-img" v-if="item.cover_pic">
                              <img
                                :src="item.cover_pic"
                                alt=""
                                width="40px"
                                height="40px"
                              />
                            </div>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <div class="single-title">
                              {{ item.goods_name }}
                            </div>
                          </div>
                        </div>
                        <div class="single-no-data" v-else>没有相关商品</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 销售走势 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">销售走势</div>
                <div class="compete">
                  <div v-if="brokenLineData.length > 0">
                    <div id="single-sale-chart"></div>
                  </div>
                  <div class="no-data" v-else>暂无图表数据</div>
                </div>
              </div>
            </div>
            <!-- 生命周期 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">生命周期</div>
                <div class="compete">
                  <div v-if="brokenLifeData.length > 0">
                    <div id="single-life-chart"></div>
                  </div>
                  <div class="no-data" v-else>暂无图表数据</div>
                </div>
              </div>
            </div>
            <!-- 读者画像 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">读者画像</div>
                <div class="compete">
                  <div>
                    <a-row :gutter="60">
                      <!-- 性别分布 -->
                      <a-col :span="12">
                        <div class="reader-text">性别分布</div>
                        <div v-if="sexColumnData.length > 0">
                          <div id="sex-chart" style="margin-left: 30px"></div>
                        </div>
                        <div class="no-data" v-else>暂无图表数据</div>
                      </a-col>
                      <!-- 年龄分布 -->
                      <a-col :span="12">
                        <div class="reader-text">年龄分布</div>
                        <div v-if="ageColumnData.length > 0">
                          <div id="age-chart" style="margin-left: 30px"></div>
                        </div>
                        <div class="no-data" v-else>暂无图表数据</div>
                      </a-col>
                    </a-row>
                  </div>
                  <div style="margin-top: 30px">
                    <a-row :gutter="60">
                      <!-- 消费 -->
                      <a-col :span="12">
                        <div class="reader-text">近一年消费</div>
                        <div v-if="moneyColumnData.length > 0">
                          <div id="money-chart" style="margin-left: 30px"></div>
                        </div>
                        <div class="no-data" v-else>暂无图表数据</div>
                      </a-col>
                      <!-- 城市层级 -->
                      <a-col :span="12">
                        <div class="reader-text">城市层级</div>
                        <div v-if="cityColumnData.length > 0">
                          <div id="city-chart" style="margin-left: 30px"></div>
                        </div>
                        <div class="no-data" v-else>暂无图表数据</div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
            <!-- 列表 -->
            <div class="model-container">
              <div class="model-bg" style="padding-bottom: 20px">
                <div class="section-title">竞品监控列表</div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="50" />
                      <col width="230" />
                      <col width="150" />
                      <col width="140" />
                      <col width="140" />
                      <col width="100" />
                      <col width="80" />
                      <col width="80" />
                      <col width="80" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>序号</td>
                        <td>品种</td>
                        <td>作者</td>
                        <td style="text-align: center">出版社</td>
                        <td>类目</td>
                        <td style="text-align: right">销售指数</td>
                        <td style="text-align: right">上期对比</td>
                        <td style="text-align: right">行业排名</td>
                        <td style="text-align: right">类目排名</td>
                      </tr>
                    </thead>
                    <tbody v-if="goodsList.length > 0">
                      <tr v-for="(item, index) in goodsList" :key="index">
                        <td style="text-align: center">{{ index + 1 }}</td>
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.cover_pic">
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 40px; height: 40px"
                              />
                              <div
                                class="goods-logo prev"
                                v-if="item.is_presale == 1"
                              >
                                预
                              </div>
                              <div
                                class="goods-logo group"
                                v-else-if="item.have_presale == 1"
                              >
                                组
                              </div>
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="goods-name click-font"
                              :title="item.goods_name"
                              @click.stop="$toDetail(item.goods_id)"
                              >{{ item.goods_name }}</span
                            >
                          </div>
                        </td>
                        <td>
                          <div class="author">
                            <div
                              class="author-name"
                              v-if="item.authors.length == 0"
                            >
                              {{ item.goods_author }}
                            </div>
                            <div
                              class="author-name click-font"
                              @click.stop="$toAuthor(item.authors[0].author_id)"
                              v-if="item.authors.length == 1"
                            >
                              {{ item.goods_author }}
                            </div>
                            <div
                              v-if="item.authors.length > 1"
                              class="author-name click-font"
                              @click.stop="openAuthor(item, index)"
                            >
                              {{ item.goods_author }}
                            </div>
                            <div class="author-list" v-if="item.active">
                              <div v-if="item.authors.length > 0">
                                <div
                                  class="author-item click"
                                  v-for="(aitem, aindex) in item.authors"
                                  :key="aindex"
                                  @click.stop="$toAuthor(aitem.author_id)"
                                >
                                  {{ aitem.name }}
                                </div>
                              </div>
                              <div v-else>
                                <div class="author-item">
                                  未查询到对应作者信息
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td style="text-align: center">
                          <span v-if="item.publisher_name">{{
                            item.publisher_name
                          }}</span>
                          <span v-else>--</span>
                        </td>
                        <td>
                          <span
                            >{{ item.cate_node_2 }}
                            <span v-if="item.cate_node_3"
                              >> {{ item.cate_node_3 }}</span
                            ></span
                          >
                        </td>
                        <td style="text-align: right">
                          <span v-if="item.sale_total" class="main-font">{{
                            item.sale_total.toLocaleString()
                          }}</span>
                          <span class="main-font" v-else>--</span>
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.compare_rate > 0"
                            >+{{ item.compare_rate }}%</span
                          >
                          <span class="green" v-else-if="item.compare_rate < 0"
                            >{{ item.compare_rate }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                        <td style="text-align: right">
                          <span v-if="item.industry_rank">{{
                            item.industry_rank
                          }}</span>
                          <span v-else>--</span>
                        </td>
                        <td style="text-align: right">
                          <span v-if="item.cate_rank">{{
                            item.cate_rank
                          }}</span>
                          <span v-else>--</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="9">
                          <div style="margin-top: 30px"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/compete/set.scss"></style>
<script>
import {
  COMPETE_MONITOR_GOODS_LISTS,
  COMPETE_MONITOR_SELF_GOODS_SALETREND,
  COMPETE_MONITOR_SELF_GOODS_HISTORYCHART,
  COMPETE_MONITOR_SELF_GOODS_READER_BASE,
  COMPETE_MONITOR_SELF_GETS,
} from "../../apis/compete.js";
import { TOP_SEARCH } from "../../apis/publish.js";
import { Chart, registerInteraction } from "@antv/g2";
export default {
  data() {
    return {
      pagePower: true,
      goodsList: [],
      isLoading: true,
      showSingle: false,
      singleClass: "single",
      close1: false,
      info1: {},
      goodsId1: 0,
      close2: false,
      info2: {},
      goodsId2: 0,
      close3: false,
      info3: {},
      goodsId3: 0,
      close4: false,
      info4: {},
      goodsId4: 0,
      tabKey: "1",
      inputVal: "",
      chooseType: 0,
      showList: [],
      focusList: [],
      // 销售走势
      brokenLineData: [],
      changeChart: null,
      chooseList1: [],
      chooseList2: [],
      chooseList3: [],
      chooseList4: [],
      // 生命周期
      brokenLifeData: [],
      LifeChart: null,
      chooseLifeList1: [],
      chooseLifeList2: [],
      chooseLifeList3: [],
      chooseLifeList4: [],
      // 读者画像
      // 性别分布
      sexColumnData: [],
      sexChart: null,
      chooseSexList1: [],
      chooseSexList2: [],
      chooseSexList3: [],
      chooseSexList4: [],
      // 年龄分布
      ageColumnData: [],
      ageChart: null,
      chooseAgeList1: [],
      chooseAgeList2: [],
      chooseAgeList3: [],
      chooseAgeList4: [],
      // 消费
      moneyColumnData: [],
      moneyChart: null,
      chooseMoneyList1: [],
      chooseMoneyList2: [],
      chooseMoneyList3: [],
      chooseMoneyList4: [],
      // 城市层级
      cityColumnData: [],
      cityChart: null,
      chooseCityList1: [],
      chooseCityList2: [],
      chooseCityList3: [],
      chooseCityList4: [],
    };
  },
  mounted() {
    this.getData("init");
  },
  updated() {
    this.$nextTick(() => {
      this.isLoading = false;
    });
  },
  methods: {
    async getData(type) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        period: this.$refs.time.cycle,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMPETE_MONITOR_GOODS_LISTS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.goodsList = [];
        res.data.map((value, key) => {
          value.active = false;
          this.goodsList.push(value);
        });
        if (type == "init") {
          this.getFocusData();
        }
        // this.isLoading = false;
      } else {
        // this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 自选列表获取
    async getFocusData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        organization_id: this.$refs.head.publishInfo.organization_id,
        order_type:"sale_total",
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMPETE_MONITOR_SELF_GETS(data);
      if (res.code == 0) {
        this.focusList = [];
        this.focusList = res.data;
        if (this.goodsList.length == 0) {
          var _this = this;
          this.$confirm({
            title: "您还未添加过竞品",
            content: "您还未添加过竞品，请先前往竞品监控列表页添加监控对象。",
            okText: "前去设置监控",
            cancelText: "取消",
            okType: "primary",
            onOk() {
              _this.$router.push({
                name: "competeset",
                query: { tabKey: "2" },
              });
            },
            onCancel() {},
          });
        }
        // else {
        let user_id = localStorage.getItem("userID"),
          org_id = localStorage.getItem("organizeID"),
          current_org_id = this.$refs.head.publishInfo.organization_id;
        if (user_id && org_id) {
          if (org_id == current_org_id) {
            let record_list = JSON.parse(localStorage.getItem("goodsRecord"));
            if (Object.keys(record_list).length > 0) {
              for (let i = 0; i < record_list.length; i++) {
                if (i == 0) {
                  this.goodsId1 = record_list[i].goods_id;
                  this.info1 = record_list[i];
                  this.close1 = true;
                } else if (i == 1) {
                  this.goodsId2 = record_list[i].goods_id;
                  this.info2 = record_list[i];
                  this.close2 = true;
                } else if (i == 2) {
                  this.goodsId3 = record_list[i].goods_id;
                  this.info3 = record_list[i];
                  this.close3 = true;
                } else if (i == 3) {
                  this.goodsId4 = record_list[i].goods_id;
                  this.info4 = record_list[i];
                  this.close4 = true;
                }
                this.getSale(record_list[i].goods_id, i + 1);
                this.getLife(record_list[i].goods_id, i + 1);
                this.getReader(record_list[i].goods_id, i + 1);
              }
            } else {
              this.defaultChoose();
            }
          } else {
            this.defaultChoose();
          }
        } else {
          this.defaultChoose();
        }
        localStorage.setItem(
          "organizeID",
          this.$refs.head.publishInfo.organization_id
        );
        this.save();
        // }
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 本社品种搜索
    async goodsearch() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        search: this.inputVal,
        page: 1,
        page_size: 100,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_SEARCH(data);
      if (res.code == 0) {
        this.showList = [];
        res.data.lists.map((value, key) => {
          if (
            value.goods_id !== this.goodsId1 &&
            value.goods_id !== this.goodsId2 &&
            value.goods_id !== this.goodsId3 &&
            value.goods_id !== this.goodsId4
          ) {
            let _obj = value;
            _obj.goods_name = value.title;
            this.showList.push(_obj);
          }
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 销售走势
    async getSale(id, _index) {
      var tStamp = this.$getTimeStamp();
      let data = {
        goods_id: id,
        start_date: this.$refs.time.oneDay,
        date_type: this.$refs.time.dateType,
        organization_id: this.$refs.head.publishInfo.organization_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMPETE_MONITOR_SELF_GOODS_SALETREND(data);
      if (res.code == 0) {
        if (_index == 1) {
          this.chooseList1 = [];
          if (res.data.length > 0) {
            res.data.map((value, key) => {
              let _obj = {};
              _obj.month = value.date.toString();
              _obj.city = "品种1";
              _obj.temperature = value.value;
              if (value.week_range) {
                _obj.range = value.week_range;
              }
              this.chooseList1.unshift(_obj);
            });
          }
        } else if (_index == 2) {
          this.chooseList2 = [];
          if (res.data.length > 0) {
            res.data.map((value, key) => {
              let _obj = {};
              _obj.month = value.date.toString();
              _obj.city = "品种2";
              _obj.temperature = value.value;
              if (value.week_range) {
                _obj.range = value.week_range;
              }
              this.chooseList2.unshift(_obj);
            });
          }
        } else if (_index == 3) {
          this.chooseList3 = [];
          if (res.data.length > 0) {
            res.data.map((value, key) => {
              let _obj = {};
              _obj.month = value.date.toString();
              _obj.city = "品种3";
              _obj.temperature = value.value;
              if (value.week_range) {
                _obj.range = value.week_range;
              }
              this.chooseList3.unshift(_obj);
            });
          }
        } else if (_index == 4) {
          this.chooseList4 = [];
          if (res.data.length > 0) {
            res.data.map((value, key) => {
              let _obj = {};
              _obj.month = value.date.toString();
              _obj.city = "品种4";
              _obj.temperature = value.value;
              if (value.week_range) {
                _obj.range = value.week_range;
              }
              this.chooseList4.unshift(_obj);
            });
          }
        }
        this.lineArr();
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 生命周期
    async getLife(id, _index) {
      var tStamp = this.$getTimeStamp();
      let data = {
        goods_id: id,
        date_type: 3,
        organization_id: this.$refs.head.publishInfo.organization_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMPETE_MONITOR_SELF_GOODS_HISTORYCHART(data);
      if (res.code == 0) {
        if (_index == 1) {
          this.chooseLifeList1 = [];
          res.data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "品种1";
            _obj.temperature = value.value;
            this.chooseLifeList1.push(_obj);
          });
        } else if (_index == 2) {
          this.chooseLifeList2 = [];
          res.data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "品种2";
            _obj.temperature = value.value;
            this.chooseLifeList2.push(_obj);
          });
        } else if (_index == 3) {
          this.chooseLifeList3 = [];
          res.data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "品种3";
            _obj.temperature = value.value;
            this.chooseLifeList3.push(_obj);
          });
        } else if (_index == 4) {
          this.chooseLifeList4 = [];
          res.data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "品种4";
            _obj.temperature = value.value;
            this.chooseLifeList4.push(_obj);
          });
        }
        this.lifeArr();
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 读者画像
    async getReader(id, _index) {
      var tStamp = this.$getTimeStamp();
      let data = {
        goods_id: id,
        organization_id: this.$refs.head.publishInfo.organization_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMPETE_MONITOR_SELF_GOODS_READER_BASE(data);
      if (res.code == 0) {
        let _total1 = 0,
          _total2 = 0,
          _total3 = 0,
          _total4 = 0,
          _arr1 = [],
          _arr2 = [],
          _arr3 = [],
          _arr4 = [];
        // if (Object.keys(res.data).length > 0) {
        // 性别分布
        for (let i = 0; i < 3; i++) {
          let _obj = {
            value: 0,
            type: "品种" + _index,
          };
          if (i == 0) {
            _obj.name = "男性";
          } else if (i == 1) {
            _obj.name = "女性";
          } else if (i == 2) {
            _obj.name = "未知";
          }
          _arr1.push(_obj);
        }
        if (res.data.persona_sex) {
          res.data.persona_sex.map((value, key) => {
            _total1 += Number(value.value);
          });
          res.data.persona_sex.map((value, key) => {
            let _num = (Number(value.value) / _total1) * 100;
            _num = _num ? Number(_num.toFixed(2)) : 0;
            if (value.name == "男") {
              _arr1[0].value = _num;
            } else if (value.name == "女") {
              _arr1[1].value = _num;
            } else if (value.name == "未知") {
              _arr1[2].value = _num;
            }
          });
        }
        // 消费能力
        for (let i = 0; i < 4; i++) {
          let _obj = {
            value: 0,
            type: "品种" + _index,
          };
          if (i == 0) {
            _obj.name = "30元以下";
          } else if (i == 1) {
            _obj.name = "30-60元";
          } else if (i == 2) {
            _obj.name = "60-100元";
          } else if (i == 3) {
            _obj.name = "100元以上";
          }
          _arr2.push(_obj);
        }
        if (res.data.persona_money) {
          res.data.persona_money.map((value, key) => {
            _total2 += Number(value.value);
          });
          res.data.persona_money.map((value, key) => {
            let _num = (Number(value.value) / _total2) * 100;
            _num = _num ? Number(_num.toFixed(2)) : 0;
            if (value.name == "低消费") {
              _arr2[0].value = _num;
            } else if (value.name == "中低消费") {
              _arr2[1].value = _num;
            } else if (value.name == "中高消费") {
              _arr2[2].value = _num;
            } else if (value.name == "高消费") {
              _arr2[3].value = _num;
            }
          });
        }
        // 年龄分布
        for (let i = 0; i < 6; i++) {
          let _obj = {
            value: 0,
            type: "品种" + _index,
          };
          if (i == 0) {
            _obj.name = "18-25岁";
          } else if (i == 1) {
            _obj.name = "26-30岁";
          } else if (i == 2) {
            _obj.name = "31-35岁";
          } else if (i == 3) {
            _obj.name = "36-40岁";
          } else if (i == 4) {
            _obj.name = "41-50岁";
          } else if (i == 5) {
            _obj.name = "51岁以上";
          }
          _arr3.push(_obj);
        }
        if (res.data.persona_age) {
          res.data.persona_age.map((value, key) => {
            _total3 += Number(value.value);
          });
          res.data.persona_age.map((value, key) => {
            let _num = (Number(value.value) / _total3) * 100;
            _num = _num ? Number(_num.toFixed(2)) : 0;
            if (value.name == "小年轻") {
              _arr3[0].value = _num;
            } else if (value.name == "青年") {
              _arr3[1].value = _num;
            } else if (value.name == "青壮年") {
              _arr3[2].value = _num;
            } else if (value.name == "中青年") {
              _arr3[3].value = _num;
            } else if (value.name == "中年") {
              _arr3[4].value = _num;
            } else if (value.name == "中老年") {
              _arr3[5].value = _num;
            }
          });
        }
        // 城市层级
        for (let i = 0; i < 3; i++) {
          let _obj = {
            value: 0,
            type: "品种" + _index,
          };
          if (i == 0) {
            _obj.name = "一二线城市";
          } else if (i == 1) {
            _obj.name = "三四线城市";
          } else if (i == 2) {
            _obj.name = "五线城市";
          }
          _arr4.push(_obj);
        }
        if (res.data.persona_city) {
          res.data.persona_city.map((value, key) => {
            _total4 += Number(value.value);
          });
          res.data.persona_city.map((value, key) => {
            let _num = (Number(value.value) / _total4) * 100;
            _num = _num ? Number(_num.toFixed(2)) : 0;
            if (value.name == "一线城市") {
              _arr4[0].value += _num;
            } else if (value.name == "二线城市") {
              _arr4[0].value += _num;
            } else if (value.name == "三线城市") {
              _arr4[1].value += _num;
            } else if (value.name == "四线城市") {
              _arr4[1].value += _num;
            } else if (value.name == "五线城市") {
              _arr4[2].value += _num;
            } else if (value.name == "新一线城市") {
              _arr4[0].value += _num;
            }
          });
          _arr4.map((value,key)=>{
            value.value = Number((value.value).toFixed(2));
            return value;
          })
        }
        // }
        if (_index == 1) {
          this.chooseSexList1 = _arr1;
          this.chooseMoneyList1 = _arr2;
          this.chooseAgeList1 = _arr3;
          this.chooseCityList1 = _arr4;
        } else if (_index == 2) {
          this.chooseSexList2 = _arr1;
          this.chooseMoneyList2 = _arr2;
          this.chooseAgeList2 = _arr3;
          this.chooseCityList2 = _arr4;
        } else if (_index == 3) {
          this.chooseSexList3 = _arr1;
          this.chooseMoneyList3 = _arr2;
          this.chooseAgeList3 = _arr3;
          this.chooseCityList3 = _arr4;
        } else if (_index == 4) {
          this.chooseSexList4 = _arr1;
          this.chooseMoneyList4 = _arr2;
          this.chooseAgeList4 = _arr3;
          this.chooseCityList4 = _arr4;
        }
        this.readerArr();
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 默认选择
    defaultChoose() {
      for (let i = 0; i < this.goodsList.length; i++) {
        if (i < 3) {
          if (i == 0) {
            this.goodsId2 = this.goodsList[i].goods_id;
            this.info2 = this.goodsList[i];
            this.close2 = true;
          } else if (i == 1) {
            this.goodsId3 = this.goodsList[i].goods_id;
            this.info3 = this.goodsList[i];
            this.close3 = true;
          } else if (i == 2) {
            this.goodsId4 = this.goodsList[i].goods_id;
            this.info4 = this.goodsList[i];
            this.close4 = true;
          }
          this.getSale(this.goodsList[i].goods_id, i + 2);
          this.getLife(this.goodsList[i].goods_id, i + 2);
          this.getReader(this.goodsList[i].goods_id, i + 2);
        }
      }
      if (this.focusList.length > 0) {
        this.goodsId1 = this.focusList[0].goods_id;
        this.info1 = this.focusList[0];
        this.close1 = true;
        this.getSale(this.focusList[0].goods_id, 1);
        this.getLife(this.focusList[0].goods_id, 1);
        this.getReader(this.focusList[0].goods_id, 1);
      }
    },
    // 本地缓存
    save() {
      let _arr = [];
      if (this.goodsId1) {
        _arr.push(this.info1);
      }
      if (this.goodsId2) {
        _arr.push(this.info2);
      }
      if (this.goodsId3) {
        _arr.push(this.info3);
      }
      if (this.goodsId4) {
        _arr.push(this.info4);
      }
      localStorage.setItem("goodsRecord", JSON.stringify(_arr));
    },
    // 销售走势折线图数组
    lineArr() {
      let _length = 0,
        _arr = [];
      _arr.push(this.chooseList1.length);
      _arr.push(this.chooseList2.length);
      _arr.push(this.chooseList3.length);
      _arr.push(this.chooseList4.length);
      for (let i = 0; i < _arr.length; i++) {
        if (_arr[i] > _length) {
          _length = _arr[i];
        }
      }
      this.brokenLineData = [];
      for (let j = 0; j < _length; j++) {
        if (this.chooseList1.length > j)
          this.brokenLineData.push(this.chooseList1[j]);
        if (this.chooseList2.length > j)
          this.brokenLineData.push(this.chooseList2[j]);
        if (this.chooseList3.length > j)
          this.brokenLineData.push(this.chooseList3[j]);
        if (this.chooseList4.length > j)
          this.brokenLineData.push(this.chooseList4[j]);
      }
      let _this = this;
      if (this.brokenLineData.length > 0) {
        this.$nextTick(() => {
          if (_this.changeChart) {
            _this.changeChart.destroy();
            _this.initSaleLine();
          } else {
            _this.initSaleLine();
          }
        });
      }
    },
    // 生命周期折线图数组
    lifeArr() {
      let _length = 0,
        _arr = [
          this.chooseLifeList1.length,
          this.chooseLifeList2.length,
          this.chooseLifeList3.length,
          this.chooseLifeList4.length,
        ];
      for (let l = 0; l < _arr.length; l++) {
        if (_length < _arr[l]) {
          _length = _arr[l];
        }
      }
      this.brokenLifeData = [];
      for (let i = 0; i < _length; i++) {
        if (i < this.chooseLifeList1.length) {
          this.brokenLifeData.push(this.chooseLifeList1[i]);
        }
        if (i < this.chooseLifeList2.length) {
          this.brokenLifeData.push(this.chooseLifeList2[i]);
        }
        if (i < this.chooseLifeList3.length) {
          this.brokenLifeData.push(this.chooseLifeList3[i]);
        }
        if (i < this.chooseLifeList4.length) {
          this.brokenLifeData.push(this.chooseLifeList4[i]);
        }
      }
      if (this.brokenLifeData.length > 0) {
        this.$nextTick(() => {
          if (this.LifeChart) {
            this.LifeChart.destroy();
            this.initLifeLine();
          } else {
            this.initLifeLine();
          }
        });
      }
    },
    // 读者画像数组
    readerArr() {
      this.sexColumnData = [];
      this.ageColumnData = [];
      this.moneyColumnData = [];
      this.cityColumnData = [];
      this.sexColumnData = [
        ...this.chooseSexList1,
        ...this.chooseSexList2,
        ...this.chooseSexList3,
        ...this.chooseSexList4,
      ];
      this.ageColumnData = [
        ...this.chooseAgeList1,
        ...this.chooseAgeList2,
        ...this.chooseAgeList3,
        ...this.chooseAgeList4,
      ];
      this.moneyColumnData = [
        ...this.chooseMoneyList1,
        ...this.chooseMoneyList2,
        ...this.chooseMoneyList3,
        ...this.chooseMoneyList4,
      ];
      this.cityColumnData = [
        ...this.chooseCityList1,
        ...this.chooseCityList2,
        ...this.chooseCityList3,
        ...this.chooseCityList4,
      ];
      this.$nextTick(() => {
        if (this.sexColumnData.length > 0) {
          if (this.sexChart) {
            this.sexChart.destroy();
            this.initSexColumn();
          } else {
            this.initSexColumn();
          }
        }
        if (this.ageColumnData.length > 0) {
          if (this.ageChart) {
            this.ageChart.destroy();
            this.initAgeColumn();
          } else {
            this.initAgeColumn();
          }
        }
        if (this.moneyColumnData.length > 0) {
          if (this.moneyChart) {
            this.moneyChart.destroy();
            this.initMoneyColumn();
          } else {
            this.initMoneyColumn();
          }
        }
        if (this.cityColumnData.length > 0) {
          if (this.cityChart) {
            this.cityChart.destroy();
            this.initCityColumn();
          } else {
            this.initCityColumn();
          }
        }
      });
    },
    showCompete(type) {
      this.inputVal = "";
      this.tabKey = "1";
      this.chooseType = type;
      this.showList = [];
      this.goodsList.map((value, key) => {
        if (
          value.goods_id !== this.goodsId1 &&
          value.goods_id !== this.goodsId2 &&
          value.goods_id !== this.goodsId3 &&
          value.goods_id !== this.goodsId4
        ) {
          this.showList.push(value);
        }
      });
      if (type == 1) {
        this.singleClass = "single one";
      } else if (type == 2) {
        this.singleClass = "single two";
      } else if (type == 3) {
        this.singleClass = "single three";
      } else if (type == 4) {
        this.singleClass = "single four";
      }
      this.showSingle = true;
    },
    delete1() {
      this.showSingle = false;
      this.info1 = {};
      this.close1 = false;
      this.goodsId1 = 0;
      this.chooseList1 = [];
      this.chooseLifeList1 = [];
      this.lineArr();
      this.lifeArr();
      this.chooseAgeList1 = [];
      this.chooseSexList1 = [];
      this.chooseMoneyList1 = [];
      this.chooseCityList1 = [];
      this.readerArr();
      this.save();
    },
    delete2() {
      this.showSingle = false;
      this.info2 = {};
      this.close2 = false;
      this.goodsId2 = 0;
      this.chooseList2 = [];
      this.lineArr();
      this.chooseLifeList2 = [];
      this.lifeArr();
      this.chooseAgeList2 = [];
      this.chooseSexList2 = [];
      this.chooseMoneyList2 = [];
      this.chooseCityList2 = [];
      this.readerArr();
      this.save();
    },
    delete3() {
      this.showSingle = false;
      this.info3 = {};
      this.close3 = false;
      this.goodsId3 = 0;
      this.chooseList3 = [];
      this.lineArr();
      this.chooseLifeList3 = [];
      this.lifeArr();
      this.chooseAgeList3 = [];
      this.chooseSexList3 = [];
      this.chooseMoneyList3 = [];
      this.chooseCityList3 = [];
      this.readerArr();
      this.save();
    },
    delete4() {
      this.showSingle = false;
      this.info4 = {};
      this.close4 = false;
      this.goodsId4 = 0;
      this.chooseList4 = [];
      this.lineArr();
      this.chooseLifeList4 = [];
      this.lifeArr();
      this.chooseAgeList4 = [];
      this.chooseSexList4 = [];
      this.chooseMoneyList4 = [];
      this.chooseCityList4 = [];
      this.readerArr();
      this.save();
    },
    callback(key) {
      this.tabKey = key;
      this.inputVal = "";
      this.showList = [];
      if (this.tabKey == "1") {
        this.goodsList.map((value, key) => {
          if (
            value.goods_id !== this.goodsId1 &&
            value.goods_id !== this.goodsId2 &&
            value.goods_id !== this.goodsId3 &&
            value.goods_id !== this.goodsId4
          ) {
            this.showList.push(value);
          }
        });
      } else if (this.tabKey == "2") {
        this.focusList.map((value, key) => {
          if (
            value.goods_id !== this.goodsId1 &&
            value.goods_id !== this.goodsId2 &&
            value.goods_id !== this.goodsId3 &&
            value.goods_id !== this.goodsId4
          ) {
            this.showList.push(value);
          }
        });
      } else if (this.tabKey == "3") {
      }
    },
    onSearch() {
      this.showList = [];
      if (this.tabKey == "1") {
        this.goodsList.map((value, key) => {
          if (
            (value.goods_name.indexOf(this.inputVal) > -1 ||
              value.isbn.toString().indexOf(this.inputVal) > -1) &&
            value.goods_id !== this.goodsId1 &&
            value.goods_id !== this.goodsId2 &&
            value.goods_id !== this.goodsId3 &&
            value.goods_id !== this.goodsId4
          ) {
            this.showList.push(value);
          }
        });
      } else if (this.tabKey == "2") {
        this.focusList.map((value, key) => {
          if (
            (value.goods_name.indexOf(this.inputVal) > -1 ||
              value.isbn.toString().indexOf(this.inputVal) > -1) &&
            value.goods_id !== this.goodsId1 &&
            value.goods_id !== this.goodsId2 &&
            value.goods_id !== this.goodsId3 &&
            value.goods_id !== this.goodsId4
          ) {
            this.showList.push(value);
          }
        });
      } else if (this.tabKey == "3") {
        this.goodsearch();
      }
    },
    select(item) {
      if (this.chooseType == 1) {
        this.info1 = item;
        this.close1 = true;
        this.goodsId1 = item.goods_id;
      } else if (this.chooseType == 2) {
        this.info2 = item;
        this.close2 = true;
        this.goodsId2 = item.goods_id;
      } else if (this.chooseType == 3) {
        this.info3 = item;
        this.close3 = true;
        this.goodsId3 = item.goods_id;
      } else if (this.chooseType == 4) {
        this.info4 = item;
        this.close4 = true;
        this.goodsId4 = item.goods_id;
      }
      this.save();
      this.showSingle = false;
      this.isLoading = true;
      this.getSale(item.goods_id, this.chooseType);
      this.getLife(item.goods_id, this.chooseType);
      this.getReader(item.goods_id, this.chooseType);
    },
    changeTime() {
      this.isLoading = true;
      this.getData();
      if (this.goodsId1 > 0) {
        this.getSale(this.goodsId1, 1);
      }
      if (this.goodsId2 > 0) {
        this.getSale(this.goodsId2, 2);
      }
      if (this.goodsId3 > 0) {
        this.getSale(this.goodsId3, 3);
      }
      if (this.goodsId4 > 0) {
        this.getSale(this.goodsId4, 4);
      }
    },
    openAuthor(item, index) {
      this.showSingle = false;
      this.$refs.time.showYear = false;
      this.goodsList = this.goodsList.map((value, key) => {
        if (index == key) {
          value.active = true;
        } else {
          value.active = false;
        }
        return value;
      });
    },
    closeDom() {
      this.showSingle = false;
      this.goodsList = this.goodsList.map((value, key) => {
        value.active = false;
        return value;
      });
    },
    singleClick() {},
    bodyClick() {
      this.showSingle = false;
      this.$refs.time.showYear = false;
      this.goodsList = this.goodsList.map((value, key) => {
        value.active = false;
        return value;
      });
    },
    // 渲染销售走势折线图
    initSaleLine() {
      let _this = this;
      this.changeChart = new Chart({
        container: "single-sale-chart",
        autoFit: true,
        height: 240,
      });

      this.changeChart.data(this.brokenLineData);
      this.changeChart.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
          min: 0,
        },
      });
      this.changeChart.tooltip({
        showCrosshairs: true,
        shared: true,
      });
      this.changeChart.axis("temperature", {
        label: {
          formatter: (val) => {
            if (_this.typeText == "sale_ratio") {
              return val + "%";
            } else {
              return val;
            }
          },
        },
      });
      this.changeChart.legend(false);
      this.changeChart
        .line()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "品种1") {
            return "#1754D2";
          } else if (city == "品种2") {
            return "#57B878";
          } else if (city == "品种3") {
            return "#FF9900";
          } else if (city == "品种4") {
            return "#E3615C";
          }
        })
        .shape("circle")
        .style({ lineWidth: 2 })
        .tooltip(
          "month*temperature*city*range",
          function (month, temperature, city, range) {
            // tooltip的第一个参数写上需要显示的字段'item1*item2*...'；第二个参数为一个函数，该函数的参数为需要显示的字段。
            let _title;
            if (_this.$refs.time.dateType == 2) {
              _title = month + "（" + range + "）";
            } else {
              _title = month;
            }
            return {
              title: _title,
              name: city,
              value:
                _this.typeText == "sale_ratio"
                  ? temperature + "%"
                  : temperature,
            };
          }
        );

      this.changeChart
        .point()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "品种1") {
            return "#5A8BEE";
          } else if (city == "品种2") {
            return "#57B878";
          } else if (city == "品种3") {
            return "#FF9900";
          } else if (city == "品种4") {
            return "#E3615C";
          }
        })
        .tooltip(false)
        .shape("circle");

      this.changeChart.render();
    },
    // 生命周期折线图
    initLifeLine() {
      this.LifeChart = new Chart({
        container: "single-life-chart",
        autoFit: true,
        height: 240,
      });

      this.LifeChart.data(this.brokenLifeData);
      if (this.brokenLifeData.length > 0) {
        this.LifeChart.option("slider", {
          start: 0,
          end: 1,
          data: this.brokenLifeData,
          trendCfg: {
            isArea: false,
          },
        });
      }
      this.LifeChart.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
          min: 0,
        },
      });
      this.LifeChart.tooltip({
        showCrosshairs: true,
        shared: true,
      });
      this.LifeChart.axis("month", {
        label: {
          formatter: (val) => {
            return val;
          },
        },
        autoHide: false | true,
      });
      this.LifeChart.axis("temperature", {
        label: {
          formatter: (val) => {
            return val;
          },
        },
      });
      this.LifeChart.legend({
        position: "top",
      });
      this.LifeChart.line()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "品种1") {
            return "#1754D2";
          } else if (city == "品种2") {
            return "#57B878";
          } else if (city == "品种3") {
            return "#FF9900";
          } else if (city == "品种4") {
            return "#E3615C";
          }
        })
        .tooltip("city*temperature", (city, temperature) => {
          return {
            name: city + "销售指数",
            value: temperature,
          };
        })
        .shape("smooth")
        .style({ lineWidth: 1 });

      this.LifeChart.render();
    },
    // 性别分布图表
    initSexColumn() {
      registerInteraction("element-link", {
        start: [
          {
            trigger: "interval:mouseenter",
            action: "element-link-by-color:link",
          },
        ],
        end: [
          {
            trigger: "interval:mouseleave",
            action: "element-link-by-color:unlink",
          },
        ],
      });

      this.sexChart = new Chart({
        container: "sex-chart",
        autoFit: true,
        height: 240,
      });

      this.sexChart.data(this.sexColumnData);
      this.sexChart.scale({
        sales: {
          // max: 2400,
          // tickInterval: 600,
          nice: true,
        },
      });

      this.sexChart.tooltip({
        showMarkers: false,
      });

      this.sexChart
        .interval()
        .position("type*value")
        .color("name", (name) => {
          if (name == "男性") {
            return "#2B6AE7";
          } else if (name == "女性") {
            return "#EA5D73";
          } else if (name == "未知") {
            return "#FF8C3F";
          }
        })
        .tooltip("type*name*value", function (type, name, value) {
          return {
            title: type,
            name: name,
            value: value + "%",
          };
        })
        .adjust("stack")
        .size(45);

      this.sexChart.interaction("element-highlight-by-color");
      this.sexChart.interaction("element-link");

      this.sexChart.render();
    },
    // 年龄分布图表
    initAgeColumn() {
      registerInteraction("element-link", {
        start: [
          {
            trigger: "interval:mouseenter",
            action: "element-link-by-color:link",
          },
        ],
        end: [
          {
            trigger: "interval:mouseleave",
            action: "element-link-by-color:unlink",
          },
        ],
      });

      this.ageChart = new Chart({
        container: "age-chart",
        autoFit: true,
        height: 240,
      });

      this.ageChart.data(this.ageColumnData);
      this.ageChart.scale({
        sales: {
          // max: 2400,
          // tickInterval: 600,
          nice: true,
        },
      });

      this.ageChart.tooltip({
        showMarkers: false,
      });

      this.ageChart
        .interval()
        .position("type*value")
        .color("name", (name) => {
          if (name == "18-25岁") {
            return "#7079E0";
          } else if (name == "26-30岁") {
            return "#D15B7E";
          } else if (name == "31-35岁") {
            return "#FC6E6C";
          } else if (name == "36-40岁") {
            return "#FFA06B";
          } else if (name == "41-50岁") {
            return "#FFB64D";
          } else if (name == "51岁以上") {
            return "#FFDB3F";
          }
        })
        .tooltip("type*name*value", function (type, name, value) {
          return {
            title: type,
            name: name,
            value: value + "%",
          };
        })
        .adjust("stack")
        .size(45);

      this.ageChart.interaction("element-highlight-by-color");
      this.ageChart.interaction("element-link");

      this.ageChart.render();
    },
    // 消费图表
    initMoneyColumn() {
      registerInteraction("element-link", {
        start: [
          {
            trigger: "interval:mouseenter",
            action: "element-link-by-color:link",
          },
        ],
        end: [
          {
            trigger: "interval:mouseleave",
            action: "element-link-by-color:unlink",
          },
        ],
      });

      this.moneyChart = new Chart({
        container: "money-chart",
        autoFit: true,
        height: 240,
      });

      this.moneyChart.data(this.moneyColumnData);
      this.moneyChart.scale({
        sales: {
          // max: 2400,
          // tickInterval: 600,
          nice: true,
        },
      });

      this.moneyChart.tooltip({
        showMarkers: false,
      });

      this.moneyChart
        .interval()
        .position("type*value")
        .color("name", (name) => {
          if (name == "30元以下") {
            return "#26A4D0";
          } else if (name == "30-60元") {
            return "#4179EA";
          } else if (name == "60-100元") {
            return "#685FA7";
          } else if (name == "100元以上") {
            return "#F5A726";
          }
        })
        .tooltip("type*name*value", function (type, name, value) {
          return {
            title: type,
            name: name,
            value: value + "%",
          };
        })
        .adjust("stack")
        .size(45);

      this.moneyChart.interaction("element-highlight-by-color");
      this.moneyChart.interaction("element-link");

      this.moneyChart.render();
    },
    // 城市层级图表
    initCityColumn() {
      registerInteraction("element-link", {
        start: [
          {
            trigger: "interval:mouseenter",
            action: "element-link-by-color:link",
          },
        ],
        end: [
          {
            trigger: "interval:mouseleave",
            action: "element-link-by-color:unlink",
          },
        ],
      });

      this.cityChart = new Chart({
        container: "city-chart",
        autoFit: true,
        height: 240,
      });

      this.cityChart.data(this.cityColumnData);
      this.cityChart.scale({
        sales: {
          // max: 2400,
          // tickInterval: 600,
          nice: true,
        },
      });

      this.cityChart.tooltip({
        showMarkers: false,
      });

      this.cityChart
        .interval()
        .position("type*value")
        .color("name", (name) => {
          if (name == "一二线城市") {
            return "#EB5E13";
          } else if (name == "三四线城市") {
            return "#FFDD58";
          } else if (name == "五线城市") {
            return "#F8E692";
          }
        })
        .tooltip("type*name*value", function (type, name, value) {
          return {
            title: type,
            name: name,
            value: value + "%",
          };
        })
        .adjust("stack")
        .size(45);

      this.cityChart.interaction("element-highlight-by-color");
      this.cityChart.interaction("element-link");

      this.cityChart.render();
    },
    publisherChange() {
      this.isLoading = true;
      this.$refs.time.cycle = this.$weekDate().weekth;
      this.$refs.time.oneDay = this.$weekDate().start.replace(/-/g, "");
      this.$refs.time.chooseWeek = this.$weekDate().start;
      this.$refs.time.chooseMonth = this.$weekDate().start;
      this.$refs.time.chooseYear = this.$weekDate().start;
      this.$refs.time.dateText =
        this.$weekDate().start + "~" + this.$weekDate().end;
      this.$refs.time.canAdd = false;
      this.$refs.time.canSub = true;
      this.$refs.time.showYear = false;
      this.$refs.time.dateType = 2;
      this.showSingle = false;
      this.info1 = {};
      this.close1 = false;
      this.goodsId1 = 0;
      this.info2 = {};
      this.close2 = false;
      this.goodsId2 = 0;
      this.info3 = {};
      this.close3 = false;
      this.goodsId3 = 0;
      this.info4 = {};
      this.close4 = false;
      this.goodsId4 = 0;
      this.brokenLineData = [];
      this.brokenLifeData = [];
      this.ageColumnData = [];
      this.moneyColumnData = [];
      this.cityColumnData = [];
      this.sexColumnData = [];
      this.getData("init");
    },
  },
};
</script>
